<template>
	<view class="check-image-container flex">
		<view class="top flex-center">
			<!-- <input placeholder="输入商品名称/首字母" type="text" class="search flex1" :value="currentGoodsVuex.foodName" /> -->
			<u--input
				@input="searchGoodsImage"
				:customStyle="{
					height: '60rpx',
					borderRadius: '60rpx',
					background: '#eee',
					paddingLeft: '20rpx',
					fontSize: '26rpx'
				}"
				v-model="foodName"
				shape="circle"
				placeholder="请输入商品名称/首字母"
				prefixIcon="search"
				prefixIconStyle="font-size: 22px;color: #909399"
				border="none"
			/>
			<view style="margin: 0 10rpx; font-weight: bold; font-size: 26rpx" @click="onTemChecked">从手机选择</view>
		</view>
		<scroll-view enable-flex scroll-x style="width: 100%; height: 230rpx; padding-top: 10rpx" v-if="imageList.length > 0">
			<view style="white-space: nowrap; overflow-x: auto">
				<image
					@click="checkedImage(item.url, 'normal')"
					v-for="item in imageList"
					:src="item.url"
					:key="item.id"
					alt=""
					style="width: 230rpx; height: 225rpx; margin-top: 10rpx; margin-left: 10rpx"
				/>
			</view>
		</scroll-view>

		<view style="line-height: 60rpx; font-size: 24rpx; padding-top: 10rpx margin-left: 10rpx" class="text-gray">以下图片来源于网络</view>
		<!-- height:calc(100vh - 400rpx) -->
		<scroll-view enable-flex scroll-y class="flex" style="flex-wrap: wrap" :style="{ height: imageList.length > 0 ? 'calc(100vh - 400rpx)' : 'calc(100vh - 170rpx)' }">
			<image
				lazy-load
				@click="checkedImage(item.thumb, 'international')"
				v-for="item in loadImageList"
				:src="item.thumb"
				:key="item.source"
				alt=""
				style="width: 31%; height: 225rpx; margin-top: 10rpx; margin-left: 10rpx"
			/>
		</scroll-view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import loadImageUtils from '@/utils/uploadImage.js';
import { baseURL } from '@/utils/env.js';
export default {
	data() {
		return {
			foodName: '',
			imageList: [],
			loadImageList: [], // 网络图片
			timer: null,
			imgSrc: null
		};
	},
	async onLoad() {
		console.log(this.currentGoodsVuex);
		this.foodName = this.currentGoodsVuex.foodName;
		// 网络图片
		Promise.all([this.loadImage(), this.getGoodsImage()]);

		// const res = await ;
		// console.log(res);
		// console.log(this.currentGoodsVuex.foodName);
	},
	computed: {
		...mapState('recognition', ['currentGoodsVuex'])
	},
	methods: {
		...mapMutations('recognition', ['setCurrentGoods']),
		async loadImage() {
			const res = await this.$api.searchGoodsImageAPI({ keyword: this.foodName });
			this.loadImageList = res.data;
			console.log(res);
		},
		async getGoodsImage() {
			const res = await this.$api.getGoodsImageAPI({ name: this.foodName });
			// this.imageList = res.data ? res.data.filter((item) => item.name === this.foodName) : [];
			this.imageList = res.data || [];
		},
		searchGoodsImage() {
			if (this.timer) {
				clearTimeout(this.timer);
			}
			this.timer = setTimeout(() => {
				console.log(this.foodName);
				if (this.foodName) {
					Promise.all([this.loadImage(), this.getGoodsImage()]);
				}
			}, 1000);
		},
		async checkedImage(iamgeItem, type) {
			const that = this;
			console.log(iamgeItem);
			if (type === 'international') {
				// 先下载在传输,网络图片不能设置白名单，直接选中图片
				// uni.downloadFile({
				// 	url: iamgeItem,
				// 	success(res) {
				// 		uni.navigateTo({
				// 			url: '/pages/workbench/recognition/canvasImage?src=' + encodeURIComponent(res.tempFilePath)
				// 		});
				// 	},
				// 	fail(err) {
				// 		console.log(err);
				// 		that.$refs.uToast.show({ type: 'error', message: '获取图片失败,请选择其他图片' });
				// 	}
				// });
				try {
					const list = JSON.parse(JSON.stringify(that.currentGoodsVuex.createList));
					if (list.length > 0) {
						list[that.currentGoodsVuex.index].dishes[that.currentGoodsVuex.ind].img = iamgeItem;
					}
					const foodList = JSON.parse(JSON.stringify(that.currentGoodsVuex.foodList));
					if (foodList.length > 0) {
						that.$set(foodList[that.currentGoodsVuex.index], 'image', iamgeItem);
						// foodList[that.currentGoodsVuex.index].image = res;
					}
					that.setCurrentGoods({
						index: that.currentGoodsVuex.index,
						ind: that.currentGoodsVuex.ind,
						imageUrl: iamgeItem,
						foodName: that.currentGoodsVuex.foodName,
						from: that.currentGoodsVuex.from,
						createList: list,
						foodList,
						form: that.currentGoodsVuex.form
					});
					that.$refs.uToast.show({ type: 'success', message: '保存成功' });
					uni.reLaunch({
						url: that.currentGoodsVuex.from
					});
				} catch (e) {
					console.log(e);
					that.$refs.uToast.show({ type: 'error', message: '保存失败,请稍后重试' });
				}
			} else {
				// 普通图片跳转裁切界面
				that.imgSrc = iamgeItem;
				// console.log(this.imgSrc, 5555);
				uni.navigateTo({
					url: '/pages/workbench/recognition/canvasImage?src=' + encodeURIComponent(iamgeItem)
				});
			}
		},
		async onTemChecked() {
			// 从手机选择
			try {
				const res = await loadImageUtils.showActionSheet();
				const imageRes = await loadImageUtils.uploadImage(res);
				console.log(imageRes);
				this.checkedImage(imageRes);
			} catch (e) {
				//TODO handle the exception
			}
		}
	}
};
</script>

<style scoped lang="scss">
.check-image-container {
	height: 100vh;
	background: white;
	padding: 30rpx 10rpx;
	flex-direction: column;
	.search {
		height: 60rpx;
		border-radius: 60rpx;
		background: #eee;
		padding-left: 20rpx;
		font-size: 26rpx;
	}

	.cropper-container {
		height: 800rpx; /* 确保父级有足够的高度 */
		display: flex;
		justify-content: center;
		align-items: center;
		background: #f8f8f8;
	}
	.canvas-container {
		width: 100%;
		height: 100vh;
		.crop-cont {
			width: 100%;
			height: 100vh;
			padding: 30rpx 50rpx;
			background: #333;
		}

		.crop-cont > image {
			display: block;
			width: 100%;
		}

		.crop-bottom {
			width: 100%;
			overflow: hidden;
			background: #fff;
			padding: 20rpx;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 10;
			display: flex;
			justify-content: space-between;
		}

		.crop-a {
			width: 120rpx;
			line-height: 60rpx;
			font-size: 30rpx;
			color: #f3c45d;
			text-align: center;
		}

		.crop-btn {
			width: 120rpx;
			line-height: 60rpx;
			font-size: 30rpx;
			color: #fff;
			background: #f3c45d;
			text-align: center;
			border-radius: 16rpx;
		}
	}
}
</style>
